<template>
  <div class="con">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <!-- :to="{ path: '/' }" -->
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="dangqian">商品详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="detail_ding">
        <div class="detail_left">
          <div class="detail_left2">
            <div
              class="img"
              @mouseenter="a = true"
              @mouseover="mouseOver"
              @mouseleave="mouseLeave"
            >
              <vue-photo-zoom-pro
                v-if="banner[index3]"
                :url="banner[index3]"
                :scale="2.5"
                style="width:88%;height:90%"
              ></vue-photo-zoom-pro>
              <i v-show="!a" class="el-icon-search"></i>
            </div>
            <div class="detail_leftlist">
              <img
                ref="activeImg"
                v-for="(a, i) in banner"
                :src="a"
                :key="i"
                :class="{ bor: i == index3 }"
                @click="index3 = i"
              />
            </div>
            <div class="detail_leftdi">
              <div @click="saveCollect">
                <i
                  :class="collect ? 'el-icon-star-on' : 'el-icon-star-off'"
                ></i>
                <span>{{ collect ? "已收藏" : "收藏" }}</span>
              </div>
              <div
                v-clipboard:copy="message"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
              >
                <i class="el-icon-share"></i>
                <span>分享</span>
              </div>
              <div @click="dialogVisible = true">
                <i class="el-icon-warning-outline"></i>
                <span>举报</span>
              </div>
            </div>
          </div>
          <div class="detail_left3">
            <div class="left3one">
              <img
                v-if="shopTag == 1"
                src="@/assets/img/dianpu/zhiying.png"
                alt=""
              />
              <div class="left3onea">{{ shop.name }}</div>
              <!-- <div class="left3oneb">去审批</div> -->
            </div>
            <el-row class="left3rwo" v-if="shop.category == 1">
              <span class="jianjie">{{ shop.title }}</span>
            </el-row>
            <el-row class="left3rwo">
              <el-col :span="3">
                <span class="left">含税单价:</span>
              </el-col>
              <el-col :span="21">
                <span class="danjia">￥{{ xinxi.price }}</span>
              </el-col>
            </el-row>
            <!-- <el-row class="left3rwo">
              <el-col :span="3">
                <span class="left">优惠:</span>
              </el-col>
              <el-col class="flex1"
                      :span="21">
                <div class="juan">平台优惠券</div>
                <div class="man">满1000元，减100元</div>
              </el-col>
            </el-row> -->
            <el-row
              class="left3rwo top"
              v-for="(item, index) in guige"
              :key="index"
            >
              <el-col :span="3">
                <span class="left">{{ item.specName }}:</span>
              </el-col>
              <el-col class="flex1 huan" :span="21" ref="refName">
                <div
                  class="xing1"
                  :class="{ xing2: items.select }"
                  v-for="(items, a) in item.specValues"
                  :key="a"
                  @click="sel_sort(index, a)"
                >
                  {{ items.specValueName }}
                </div>
              </el-col>
            </el-row>
            <el-row class="left3rwo">
              <el-col :span="3">
                <span class="left">数量:</span>
              </el-col>
              <el-col class="flex1" :span="21">
                <!-- :min="xinxi.buyMin"
                                 :max="xinxi.stock" -->
                <!-- @change="((a)=>handleChange(a,xinxi.buyMin,xinxi.stock))" -->
                <el-input-number
                  v-model="num"
                  @change="handleChange"
                  label="描述文字"
                ></el-input-number>
              </el-col>
            </el-row>
            <el-row class="left3rwo" v-if="shop.category == 0">
              <el-col :span="3">
                <span class="left">库存:</span>
              </el-col>
              <el-col class="flex1" :span="21">
                <!-- <span class="left">{{xinxi.stock}}{{xinxi.unit}}</span> -->
                <span class="left" v-if="xinxi.stock > 0">有库存</span>
                <span class="left" v-else>暂无库存</span>
              </el-col>
            </el-row>
            <div class="flex1">
              <div class="add" @click="addcart">加入购物车</div>
              <div class="mai" @click="tozifu">立即购买</div>
            </div>
          </div>
        </div>
        <div class="detail_right">
          <img :src="shop.shopLogo" alt="" @click="toshangjia" />
          <div class="title" @click="toshangjia">{{ shop.shopName }}</div>
          <div class="diqu" @click="toshangjia">
            所在地区：<span>{{ shop.shopAddress }}</span>
            <!-- <span>四川省</span><span>成都市</span><span>金牛区</span> -->
          </div>
          <a href="javascript:void(0)" class="kefu" @click="kefu">客服</a>
          <!-- <a  onclick="_MEIQIA('showPanel')">联系客服</a> -->
        </div>
      </div>
      <div class="detail_ding di">
        <div class="left">
          <div class="title">热销商品</div>
          <div class="list">
            <div
              class="item"
              v-for="(item, i) in list"
              :key="i"
              @click="shangpin(item.id)"
            >
              <img :src="item.imgurl" alt="" />
              <div class="name">
                {{ item.name }}
              </div>
              <div class="qian">￥{{ item.price }}</div>
              <div class="bu">{{ item.spec }}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="商品信息" name="first" class="shang can">
              <div class="title">商品信息</div>
              <img
                class="img"
                v-for="(i, a) in goodsImg"
                :key="a"
                :src="i"
                alt=""
              />
            </el-tab-pane>
            <el-tab-pane label="售货服务" name="second" class="can">
              <div class="title">售货服务</div>
              <div>{{ shop.afterSale }}</div>
            </el-tab-pane>
            <el-tab-pane label="商品参数" name="third" class="can">
              <div class="title">商品参数</div>
              <div class="a" v-for="(item, i) in param" :key="i">
                {{ item.name }}:{{ item.value }}
              </div>
              <!-- <div class="a">安装方式：吸顶安装</div>
              <div class="a">外观尺寸：143mm*80mm*58mm（长、宽、高）</div>
              <div class="a">工作环境：-20~+60度@90%RH</div>
              <div class="top30 a">
                <div>产品亮点</div>
                <div>
                  人脸抓拍采用深度学习算法实现人脸检测、跟踪、去重、质量检测等功能，可支持典型场景中同框30人脸抓拍，准确率97.5%。
                  深度适配百度大脑人脸识别服务，如公有云与人脸私有化部署等。
                  结合市场主流云端服务做人脸识别方案，实现VIP
                  顾客识别、人流量分析、无感人脸签到等功能，万级人脸库首选识别率可达99%以上，百万级人脸库毫秒级检索，解决零售、教育、办公等众多场景的业务需求。
                </div>
              </div> -->
            </el-tab-pane>
            <el-tab-pane :label="pinglun" name="fourth" class="can ping">
              <div class="title">{{ pinglun }}</div>
              <!-- <div class="manyi">
                <span>商品满意度</span>
                <span class="fen">5分</span>
              </div> -->
              <div class="xuanzhe">
                <el-radio v-model="radio" @change="radio1" label="a"
                  >全部</el-radio
                >
                <el-radio v-model="radio" @change="radio1" label="b"
                  >有图（{{ youtu }}）</el-radio
                >
              </div>
              <div class="list">
                <div v-for="(item, i) in sanglist" :key="i" class="item">
                  <div class="one">
                    <span class="name1">{{ item.name }}</span>
                    <el-rate v-model="item.star" disabled :colors="colors">
                    </el-rate>
                  </div>
                  <div class="two" v-if="item.imgList[0].length > 0">
                    <el-image
                      style="width: 60px; height: 100px"
                      v-for="(src, index) in item.imgList"
                      :key="index"
                      :src="src"
                      :preview-src-list="item.imgList"
                    >
                    </el-image>
                  </div>
                  <div class="swo">
                    {{ item.content }}
                  </div>
                  <div class="si">
                    <span>{{ item.create_at }}</span>
                    <span>{{ item.spec }}</span>
                    <span>购买数量：{{ item.total }}</span>
                  </div>
                </div>
              </div>
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :hide-on-single-page="true"
                @current-change="handleCurrentChange"
                prev-text="上一页"
                next-text="下一页"
                class="aut"
              >
                <!-- :hide-on-single-page="true" -->
              </el-pagination>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <el-dialog title="举报信息" :visible.sync="dialogVisible">
        <el-form :model="form" label-width="100px">
          <el-form-item label="姓名">
            <el-input
              v-model="form.name"
              placeholder="请输入你的姓名"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="form.phone"
              placeholder="请输入你的手机号"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input
              v-model="form.content"
              placeholder="请输入你要举报的内容"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="jubao">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      a: false,
      index: 0,
      index2: 0,
      index3: 0,
      num: 1,
      activeName: "first",
      radio: "a", //评论，a全部 b有图
      pageNum: 1, //页数
      pageSize: 10, //条数
      total: 0, //评分总条数
      sanglist: [],
      value: 4.5, //评分
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], //评分颜色
      // signImages: [
      //   'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3d9fc10fa3014c08063b2ea53a7a025b/359b033b5bb5c9eac1754f45df39b6003bf3b396.jpg',
      //   'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg',
      //   'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=7ecc7f20ae0f4bfb93d09854334e788f/10dfa9ec8a1363279e1ed28c9b8fa0ec09fac79a.jpg'
      // ],
      dialogVisible: false,
      form: {
        name: "",
        phone: "",
        content: "",
        status: 1
      },
      banner: [], //轮播图
      collect: false,
      message: "", //当前网址
      ipo: "", //手机号
      shopTag: 0, //店铺标签0默认1平台自营
      price: 0, //商品价格
      guige: [], //商品规格
      shop: {}, //商品信息
      xinxi: {}, //选中商品信息
      dianid: "", //店铺id a5ef01235a4d4ceab0c9f274cce45208
      list: [], //推荐商品
      goodsImg: [], //商品详情
      param: [], //商品规格
      pinglun: "",
      youtu: 0,
      url: "",
      refValue: null,
      time: null
    };
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    if (!localStorage.getItem("userId")) {
      this.$router.push("/login");
      return;
    }

    this.isinput();
    this.dianpu(); //获取店铺信息
    this.getGoodsComent();
    this.getGoodsComent1();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.message = window.location.href;
    this.activeImg();
  },
  watch: {
    $route: function(to, from) {
      // 通过更新Vuex中的store的数据，让数据发生变化
      this.dianpu();
    }
  },
  //计算属性
  computed: {},
  //方法
  methods: {
    activeImg() {
      console.log("执行了");
      if (this.banner !== "") {
        const time = setInterval(() => {
          // this.$refs.activeImg.click();
          this.activeImgTo();
        }, 2500);
        this.time = time;
      }
    },
    mouseOver() {
      clearInterval(this.time);
    },
    mouseLeave() {
      this.a = false;
      if (this.banner !== "" && this.banner.length > 1) {
        const time = setInterval(() => {
          // this.$refs.activeImg.click();
          this.activeImgTo();
        }, 2500);
        this.time = time;
      }
    },
    activeImgTo() {
      if (this.index3 > this.banner.length - 2) {
        this.index3 = 0;
      } else {
        this.index3 = this.index3 + 1;
      }
    },
    kefu() {
      // window.open(this.url);
         _MEIQIA('showPanel');
    },
    isinput() {
      this.$store.commit("setDValue", true);
    },
    handleChange(a) {
      let { buyMin, stock } = this.xinxi;
      if (a > stock) {
        this.$message.error("选中数量超出库存数量");
      } else if (a < buyMin) {
        this.$message.error("选中数量不能小于1");
      }
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage;
      this.getGoodsComent();
    },
    radio1(e) {
      console.log(e);
      this.radio = e;
      this.getGoodsComent();
    },
    //举报
    jubao() {
      var tellreg = /^1[0-9]{10}$/;
      if (!this.form.name) {
        this.$message.error("请输入你的姓名");
      } else if (!this.form.phone) {
        this.$message.error("请输入你的手机号");
      } else if (!tellreg.test(this.form.phone)) {
        this.$message({
          message: "手机号错误，请检查后重新填写",
          type: "warning"
        });
      } else if (!this.form.content) {
        this.$message.error("请输入你要举报的内容");
      } else {
        this.form.type = "0";
        this.form.backId = this.$route.query.id;
        this.$postRequest("/api/trotocol/saveFeedback", this.form).then(res => {
          this.$message.success("举报成功");
          this.dialogVisible = false;
        });
      }
    },
    //店铺信息
    async dianpu() {
      let res = await this.$postRequest("/api/goods/goods/getDetail", {
        goodsId: this.$route.query.id,
        userId: localStorage.getItem("userId")
          ? localStorage.getItem("userId")
          : "-1"
      });
      let data = res.data;
      this.banner = data.banner
        .substring(1, res.data.banner.length - 1)
        .split(",");
      this.collect = JSON.parse(data.collect);
      this.shopTag = data.shopTag;
      this.price = data.price;
      this.shop = data;
      console.log(this.shop);
      this.ipo = data.shopCustomerMobile;
      this.goodsImg = data.goodsImg
        .substring(1, res.data.banner.length - 1)
        .split(",");
      this.pinglun = `评论（${data.comentSize}）`;
      console.log("aaaaa", data.param);
      this.param = JSON.parse(data.param);
      // console.log(this.banner, this.collect, this.guige)
      // console.log('111', data.spec)
      // console.log('222', JSON.parse(data.spec))
      this.diyichi(JSON.parse(data.spec));
      this.dianid = data.shopId;
      this.recommend(data.shopId); //获取推荐商品
      // _MEIQIA('entId', data.serverId);
      this.url =
        "https://temp-chat.mstatik.com/widget/standalone.html?eid=" +
        data.serverId;
    },
    // beforeRouteLeave(to, form, next) {
    //   _MEIQIA('entId', window.entId);
    //   next()
    // },
    // 默认选中商品信息
    async diyichi(guige) {
      console.log(guige);
      var spec = guige;
      var spectext = "";
      console.log(spec);
      spec.forEach(i => {
        spectext =
          spectext + "*" + i.specName + ":" + i.specValues[0].specValueName;
        i.specValues.forEach(j => {
          j.select = false;
        });
        i.specValues[0].select = true;
      });
      this.guige = spec;
      spectext = spectext.substring(1);
      let res = await this.$postRequest("/api/goods/getProduct", {
        id: this.$route.query.id,
        spec: spectext,
        userId: localStorage.getItem("userId")
          ? localStorage.getItem("userId")
          : "-1",
        type: "0"
      });
      this.xinxi = res.data;
      console.log(res);
    },
    // 商品信息
    async sel_sort(e1, e2) {
      console.log(e1, e2);
      var spec = this.guige;
      var idx = e1; // 第一层循环index
      var index = e2; // 第二层循环index
      spec[idx].specValues.forEach(i => {
        i.select = false;
      });
      spec[idx].specValues[index].select = true;
      this.guige = spec;
      var spectext = "";
      spec.forEach(i => {
        i.specValues.forEach(j => {
          if (j.select) {
            spectext = spectext + "*" + j.specName + ":" + j.specValueName;
          }
        });
      });
      spectext = spectext.substring(1);
      let res = await this.$postRequest("/api/goods/getProduct", {
        id: this.$route.query.id,
        spec: spectext,
        userId: localStorage.getItem("userId")
          ? localStorage.getItem("userId")
          : "-1",
        type: "0"
      });
      console.log(res);
      this.xinxi = res.data;
    },
    //收藏商品
    async saveCollect() {
      if (localStorage.getItem("userId")) {
        let res = await this.$postRequest("/api/memberCollect/saveCollect", {
          userId: localStorage.getItem("userId"),
          status: "0",
          collectId: this.$route.query.id
        });
        console.log(res);
        if (res.code == 0) {
          this.collect = !this.collect;
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      } else {
        this.$router.push({ name: "loginindex" });
      }
    },
    // 复制成功
    onCopy(e) {
      this.$message.success("网址已成功复制到粘贴板,可以发给好友了");
    },
    onCopy1(e) {
      this.$message.success("手机号已成功复制到粘贴板,可以拨打客服电话了");
    },
    // 复制失败
    onError(e) {
      this.$message.error("复制失败");
    },
    // 加入购物车
    async addcart() {
      let { buyMin, stock } = this.xinxi;
      if (this.num > stock) {
        this.$message.error("选中数量超出库存数量");
        return;
      } else if (this.num < buyMin) {
        this.$message.error("选中数量不能小于1");
        return;
      }
      if (localStorage.getItem("userId")) {
        let res = await this.$postRequest("/api/memberCart/addCart", {
          userId: localStorage.getItem("userId"),
          status: "0",
          goodsId: this.$route.query.id,
          productId: this.xinxi.id,
          num: this.num
        });
        console.log(res);
        if (res.code == 0) {
          this.$message.success(res.msg);
          let res1 = await this.$postRequest("/api/memberCart/getCountCart", {
            userId: localStorage.getItem("userId")
          });
          this.$store.commit("setcart", res1.data);
        } else {
          this.$message.error(res.msg);
        }
      } else {
        this.$router.push({ name: "loginindex" });
      }
    },
    //跳转到商家详情
    toshangjia() {
      this.$router.push({
        path: "/home/business",
        query: {
          id: this.shop.shopId
        }
      });
    },
    // 获取推荐列表
    async recommend(id) {
      let res = await this.$postRequest("/api/shop/getShopGoods", {
        shopId: id,
        pageNum: "1",
        pageSize: "10"
      });
      console.log("recommend", res);
      this.list = res.data.list;
    },
    // 切换本页数据
    shangpin(id) {
      this.$router.replace({
        path: "/home/detail",
        query: {
          id
        }
      });
      // this.dianpu()
    },
    // 去支付
    tozifu() {
      let { buyMin, stock } = this.xinxi;
      if (this.num > stock) {
        this.$message.error("选中数量超出库存数量");
        return;
      } else if (this.num < buyMin) {
        this.$message.error("选中数量不能小于1");
        return;
      }
      if (localStorage.getItem("userId")) {
        this.$router.push({
          path: "/home/order",
          query: {
            sty: 1,
            userId: localStorage.getItem("userId"),
            goodsId: this.$route.query.id,
            productId: this.xinxi.id,
            total: this.num
          }
        });
      } else {
        this.$router.push({ name: "loginindex" });
      }
    },
    getGoodsComent1() {
      this.$postRequest("/api/goods/getGoodsComent", {
        goodsId: this.$route.query.id,
        userId: localStorage.getItem("userId"),
        status: "0",
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.youtu = res.data.total;
      });
    },
    // 获取评论列表
    async getGoodsComent() {
      let res = await this.$postRequest("/api/goods/getGoodsComent", {
        goodsId: this.$route.query.id,
        userId: localStorage.getItem("userId"),
        status: this.radio == "a" ? "1" : "0",
        pageNum: this.pageNum,
        pageSize: this.pageSize
      });
      this.total = res.data.total;
      this.sanglist = res.data.list;
    }
  }
};
</script>
<style scoped lang="scss">
.con {
  background-color: #f9f9f9;
  /deep/ .img-zoomer {
    background: #ffffff;
  }
  & > div {
    width: 1400px;
    margin: auto;
    /deep/ .el-breadcrumb {
      height: 48px;
      font-size: 14px;
      line-height: 48px;
      .el-breadcrumb__inner {
        color: #999;
        font-weight: 500;
      }
      .dangqian .el-breadcrumb__inner {
        color: #1a69e0;
      }
    }
    .detail_ding {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .detail_left {
        width: 1100px;
        height: 520px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        padding: 40px 20px 20px 40px;
        // position: relative;
        display: flex;
        .detail_left2 {
          width: 350px;
          height: 100%;
          margin-right: 30px;
          .img {
            width: 300px;
            height: 310px;
            position: relative;
            i {
              position: absolute;
              width: 21px;
              height: 21px;
              bottom: 10px;
              right: 10px;
              font-weight: 700;
            }
          }
          .detail_leftlist {
            width: 300px;
            display: flex;
            margin: 20px 0 18px 0;
            img {
              width: 55px;
              height: 55px;
              margin-right: 10px;
              border: 1px solid transparent;
              cursor: pointer;
            }
            .bor {
              border: 1px solid #1a69e0;
            }
          }
          .detail_leftdi {
            display: flex;
            align-items: center;
            height: 18px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            div {
              display: flex;
              align-items: center;
              margin-right: 30px;
              cursor: pointer;
              &:hover {
                color: #2f77e3;
              }
            }
            i {
              font-size: 18px;
            }
            img {
              width: 18px;
              height: 18px;
              margin-right: 10px;
            }
          }
        }
        .detail_left3 {
          width: 100%;
          .left3one {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            img {
              width: 50px;
              height: 20px;
              margin-right: 10px;
            }
            .left3onea {
              flex: 1;
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #000000;
            }
            .left3oneb {
              width: 100px;
              height: 40px;
              background: rgba(224, 68, 26, 0.1);
              border: 1px solid #e0441a;
              text-align: center;
              line-height: 40px;
              font-size: 20px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #e0441a;
              cursor: pointer;
              &:hover {
                opacity: 0.9;
              }
            }
          }
          .left3rwo {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &.top {
              align-items: baseline;
              margin-bottom: 10px;
            }
            .left {
              font-size: 16px;
              font-family: PingFang SC;
              color: #000000;
            }
            .danjia {
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #e0441a;
            }
            .flex1 {
              display: flex;
              align-items: center;
              .add {
                width: 200px;
                height: 50px;
                background: #eff4f8;
                border: 1px solid #1a69e0;
                line-height: 50px;
                text-align: center;
                font-size: 20px;
                font-family: PingFang SC;
                color: #1a69e0;
                cursor: pointer;
              }
              .mai {
                width: 200px;
                height: 50px;
                background: #1a69e0;
                font-size: 20px;
                font-family: PingFang SC;
                color: #ffffff;
                line-height: 50px;
                text-align: center;
                cursor: pointer;
              }
            }
            .huan {
              flex-flow: row wrap;
              align-content: flex-start;
            }
            .juan {
              width: 100px;
              height: 35px;
              background: #ffffff;
              border: 1px solid #1a69e0;
              font-size: 16px;
              font-family: PingFang SC;
              color: #1a69e0;
              line-height: 35px;
              text-align: center;
              margin-right: 10px;
            }
            .man {
              font-size: 16px;
              font-family: PingFang SC;
              color: #999999;
            }
            .xing1 {
              height: 35px;
              background: #ffffff;
              border: 1px solid #eeeeee;
              line-height: 35px;
              text-align: center;
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
              padding: 0 10px;
              margin-right: 20px;
              margin-bottom: 10px;
              cursor: pointer;
              box-sizing: content-box;
            }
            .xing2 {
              background: rgba(26, 105, 224, 0.05);
              border: 1px solid #1a69e0;
              color: #1a69e0;
            }
            /deep/ .el-input__inner {
              border-radius: 0px;
            }
            // .bo{
            //   display: ;
            // }
          }
          .flex1 {
            display: flex;
            align-items: center;
            .add {
              width: 200px;
              height: 50px;
              background: #eff4f8;
              border: 1px solid #1a69e0;
              line-height: 50px;
              text-align: center;
              font-size: 20px;
              font-family: PingFang SC;
              color: #1a69e0;
              cursor: pointer;
              margin-right: 20px;
            }
            .mai {
              width: 200px;
              height: 50px;
              background: #1a69e0;
              font-size: 20px;
              font-family: PingFang SC;
              color: #ffffff;
              line-height: 50px;
              text-align: center;
              cursor: pointer;
            }
          }
        }
      }
      .detail_right {
        width: 290px;
        height: 520px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        padding: 30px 35px;
        position: relative;
        img {
          width: 60px;
          height: 60px;
          display: block;
          margin: 0 auto 20px;
          cursor: pointer;
        }
        .title {
          font-size: 18px;
          text-align: center;
          font-family: PingFang SC;
          color: #000000;
          margin-bottom: 20px;
          cursor: pointer;
        }
        .diqu {
          font-size: 14px;
          font-family: PingFang SC;
          text-align: center;
          color: #000000;
          span {
            margin-right: 4px;
          }
        }
        .kefu {
          width: 200px;
          height: 35px;
          background: rgba(1, 104, 179, 0.05);
          border: 1px solid #1a69e0;
          font-size: 16px;
          font-family: PingFang SC;
          color: #1a69e0;
          line-height: 35px;
          text-align: center;
          position: absolute;
          left: 45px;
          bottom: 30px;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
    .di {
      align-items: flex-start;
      .left {
        width: 280px;
        background: #ffffff;
        // border: 1px solid #eeeeee;
        .title {
          width: 280px;
          height: 50px;
          border: 1px solid #eeeeee;
          padding-left: 20px;
          line-height: 50px;
        }
        .list {
          .item {
            width: 280px;
            height: 280px;
            background: #ffffff;
            border: 1px solid #eeeeee;
            padding: 30px 20px;
            cursor: pointer;
            border-top: none;
            img {
              width: 130px;
              height: 130px;
              background: #fcfcfc;
              border: 1px solid #e5e5e5;
              display: block;
              margin: 0px auto 20px;
            }
            .name {
              height: 40px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #000000;
              line-height: 20px;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .qian {
              font-size: 14px;
              font-family: PingFang SC;
              color: #e0441a;
              line-height: 20px;
            }
            .bu {
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
              line-height: 20px;
              margin-top: 10px;
            }
          }
        }
      }
      .right {
        width: 1100px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        /deep/ .el-tabs__item {
          height: 50px;
          line-height: 50px;
          padding: 0 20px;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          &.is-active {
            color: #409eff;
          }
        }
        /deep/ .el-tabs__nav-wrap::after {
          height: 1px;
        }
        /deep/ .el-tabs {
          background: #ffffff;
        }
        /deep/ .el-tabs__content {
          padding: 20px;
        }
        .shang {
          .img {
            width: 100%;
          }
        }
        .can {
          padding: 0 10px 60px 25px;
          position: relative;
          .title {
            font-size: 24px;
            font-family: PingFang SC;
            color: #000000;
            line-height: 24px;
            margin-bottom: 30px;
            &::after {
              content: "";
              width: 4px;
              height: 22px;
              background: #1a69e0;
              position: absolute;
              left: 8px;
              top: 2px;
            }
          }
          div.a {
            font-size: 18px;
            font-family: PingFang SC;
            color: #000000;
            line-height: 24px;
          }
          div.top30 {
            margin-top: 30px;
          }
        }
        .ping {
          .manyi {
            height: 45px;
            background: #f9f9f9;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 45px;
            font-size: #000000;
            padding-left: 20px;
            .fen {
              color: #ff0000;
              margin-left: 20px;
              font-size: 20px;
            }
          }
          .xuanzhe {
            height: 70px;
            line-height: 70px;
            font-size: 18px;
            border-bottom: 1px solid #eeeeee;
            bo /deep/ .el-radio__label {
              font-size: 18px;
            }
          }
          .list {
            .item {
              border-bottom: 1px solid #eeeeee;
              padding: 0 20px;
              .one {
                display: flex;
                align-items: center;
                margin: 15px 0 18px 0;
                .name1 {
                  font-size: 16px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #666666;
                  line-height: 24px;
                  margin-right: 20px;
                  /deep/.el-rate {
                    height: 28px;
                    .el-rate__icon {
                      font-size: 28px;
                    }
                  }
                }
              }
              .two {
                margin-bottom: 20px;
                /deep/ .el-image {
                  margin-right: 10px;
                  .el-image__inner {
                    width: 60px;
                    height: 60px;
                    cursor: pointer;
                  }
                }
              }
              .swo {
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #000000;
                line-height: 24px;
                margin-bottom: 20px;
              }
              .si {
                font-size: 16px;
                font-family: PingFang SC;
                color: #666666;
                line-height: 24px;
                margin-bottom: 15px;
                span {
                  margin-right: 30px;
                }
              }
            }
          }
          .aut {
            text-align: center;
            margin-top: 14px;
            margin-bottom: 14px;
          }
          /deep/ .el-pagination button,
          .el-pagination span:not([class*="suffix"]) {
            width: 60px;
          }
        }
      }
    }
  }
}
</style>